<template>
  <div class="Comment">
    <header class="header">
      <h2 class="title">发表评论</h2>
    </header>

    <textarea
      name=""
      id=""
      cols="30"
      rows="10"
      placeholder="请输入内容"
    ></textarea>

    <van-button
      type="danger"
      block
      @click="postComment"
    >提交</van-button>

    <ul class="comment-list">
      <li
        v-for="(item,index) in comments"
        :key="index"
      >
        <p class="information">
          <span>第{{index+1}}楼</span>
          <span>用户:{{item.user_name}}</span>
          <span>发表时间:{{item.add_time}}</span>
        </p>
        <p class="bbtxt">{{item.content}}</p>
      </li>
    </ul>

    <van-button
      type="danger"
      block
      plain
      @click="getMOre"
    >{{hasMore?'评论加载完毕':'加载更多'}}</van-button>
  </div>
</template>
<script>
export default {
  props: ['id'],
  data: () => ({
    page: 1,
    pagesize: 2,
    comments: [],
    hasMore: false,
    content: ''
  }),
  created() {
    this.getComments()
  },
  methods: {
    async getComments() {
      if (this.hasMore !== false) return
      this.page++
      try {
        const {
          data: { message, count }
        } = await this.Api.getComments({
          id: this.id,
          page: this.page,
          pagesize: this.pagesize
        })
        this.comments = this.comments.concat(message)
        this.hasMore = this.page * this.pagesize > count
      } catch (error) {
        this.$Toast('添加评论数据失败')
      }
    },
    getMOre() {
      this.getComments()
    },
    async postComment() {
      try {
        const {
          data: { message }
        } = await this.Api.postComment({ id: this.id, content: this.content })
        console.log(message)
        this.comments.unshift({
          add_time: new Date().getTime(),
          content: this.content,
          id: new Date().getTime(),
          user_name: '匿名用户'
        })
      } catch (error) {
        this.$Toast('提交评论失败')
      }
    }
  },
  computed: {
    // hasMoreText() {
    //   return this.hasMore ? '所有评论加载完毕' : '加载更多'
    // }
  }
}
</script>
<style lang="less" scoped>
.Comment {
  margin-bottom: 100px;
}
.header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  margin-bottom: 5px;
}
textarea {
  width: 100%;
  height: 150px;
  padding: 5px 10px;
  border-left: none;
  border-right: none;
}
.comment-list {
  margin-bottom: 20px;
  .information {
    font-size: 14px;
    margin: 10px;
    span {
      margin-right: 50px;
    }
  }
  .bbtxt {
    font-size: 12px;
    margin: 0px 10px;
  }
}
</style>
